<template>
  <div class="container message">
    <!-- 短信通知 -->
    <div class="sanfan-detailBox">
      <div class="message_l">
        <div class="hd"><span class="title">预览效果</span></div>
        <div class="phone">
          <div class="info">【自来水公司】{{textarea}}</div>
          <div class="tip">
            ※ 当前发送内容
            <span class="fc-red">{{textarea.length+7}}字</span>
            ，预计发送条数约为
            <span class="fc-red">{{parseInt((textarea.length+7)/71)+1}}条</span>
            短信。（实际发送时，模板变量会影响计费条数，请特别关注！）
          </div>

          <div class="tip">※ 当前为短信预览内容，具体内容以真实内容为准！</div>
        </div>
        <div class="hd align_c">
          <el-button>取消</el-button>
          <el-button type="primary">发送短信</el-button>
        </div>
      </div>
      <div class="message_r">
        <div class="hd">
          <span class="title">接收人</span>
          
          <span class="fr">
            <el-button type="primary" size="mini">选择用户</el-button>
          <span class="fc-gray">(当前{{tags.length}}人)</span>
          </span>
          <div class="clear"></div>
        </div>
        <div class="bd" style="border:0">
          <p v-if="tags.length==0" class="fc-gray align_c f16">
            <i class="el-icon-circle-plus-outline f20"></i> 请至少选择1个接收人!
          </p>
          <el-tag v-for="tag in tags" :key="tag.name" closable :type="tag.type" @close="handleClose(tag)" class="mr10">
            {{tag.name}}
          </el-tag>
        </div>
        <div class="hd"><span class="title">短信签名</span></div>
        <div class="bd">
          <el-radio-group v-model="radio">
            <el-radio :label="1">网站</el-radio>
            <el-radio :label="2" disabled>app</el-radio>
            <el-radio :label="3" disabled>小程序</el-radio>
          </el-radio-group>
        </div>
        <div class="hd"><span class="title">短信模板</span></div>
        <div class="bd">
          <el-radio-group v-model="muban" class="checkList">
            <el-radio :label="1">【自来水公司】您的账户6821于06月01日15:48充值人民币900元</el-radio>
            <el-radio :label="2">【自来水公司】验证码：#CodeNumber#，您正在绑定手机号码，如非本人操作请及时修改账号密码。验证码5分钟内有效</el-radio>
            <el-radio :label="3">【欠费提醒】您好！您的账户当前余额不足，请及时充值</el-radio>
          </el-radio-group>
        </div>
        <div class="hd"><span class="title">短信参数</span></div>
        <div class="bd"></div>
        <div class="hd"><span class="title">短信内容</span></div>
        <div class="bd">
          <el-input v-model="textarea" type="textarea" :rows="5"></el-input>
        </div>
        <div class="hd"><span class="title">发送时间</span></div>
        <div class="bd">
          <el-radio-group v-model="radio2">
            <el-radio :label="1">立即发送</el-radio>
            <el-radio :label="2" disabled>定时发送</el-radio>
          </el-radio-group>
        </div>
        
      </div>
      <div class="clear"></div>


    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tags: [{
            name: '张三',
            type: '',
            id: 3
          },
          {
            name: '李四',
            type: '',
            id: 4
          },
          {
            name: '王五',
            type: '',
            id: 5
          },
          {
            name: '赵六',
            type: '',
            id: 6
          },
        ],
        radio: 1,
        radio2: 1,
        muban: 1,
        textarea: ""
      }
    },
    mounted() {

    },
    beforeDestroy() {},
    created() {},
    methods: {
      handleClose(tag) {
        this.tags.splice(this.tags.indexOf(tag), 1);
      },
    }
  }
</script>
<style lang="scss">
  .message {
    .message_l{width:300px ;float: right;}
    .message_r{width: calc(100% - 340px);float:left ;}
    .bd {
      padding: 0px 20px;
    }

    .phone {
      width: 300px;
      height: 278px;
      padding: 76px 25px;
      background: url("") 0% 0% / 300px 278px;
      .info{height: 80px; overflow-y: auto; background-color: #f1f1f1;    word-wrap: break-word;}
      .tip{margin-top: 20px;}
    }
  }

  .checkList {
    display: block;

    .el-radio {
      display: block;
      white-space: unset;
      padding: 10px 10px
    }

    .el-radio:hover {
      background: #dcdcdc;
    }

    .el-radio__label {
      line-height: 24px !important;
    }
  }
</style>